<style lang="scss" scoped>
  .wrap{
    position: relative;
    display: flex;
    width: 350px; height: 101px;
    border-bottom: 1px solid #E5E5E5;
    cursor: pointer;
  }

  .image{
    position: relative;
    display: block;
    width: 100px;
    &>img{
      background: #ccc;
    }
    &>.wait,.forbid,.timeout{
      height: 20px; width: 100%;
      background: #F5A623;
      color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      line-height: 20px;
      font-size: 12px;
    }
    &>.forbid{
      background: #000;
      color: #fff;
    }
    &>.timeout{
      background:#FF523E;
      color: #fff;
    }
  }

  .block{
    flex: 1;
    position: relative;
  }

  .nickname{
    position: absolute;
    top: 12px;
    left: 10px;
    height:16px;
    font-size:16px;
    color:rgba(48,54,65,1);
    line-height:16px;
    text-align: left;
  }

  .icon{
    position: absolute;
    width: 14px; height: 20px;
    right: 10px; top: 12px;
  }

  .duty{
    position: absolute;
    width: 100%;
    padding-left: 10px;
    padding-right: 50px;
    box-sizing: border-box;
    top: 57px;
    height:17px;
    font-size:12px;
    color:rgba(48,54,65,1);
    line-height:17px;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .auth{
    @extend .duty;
    top: 79px;
  }

  .bg-red{
    background: #FF523E;
    width: 15px; height: 15px;
    border-radius: 50%;
  }
</style>

<template>
  <section class="wrap">
      <div class="image" >
        <img :src="imgF" width="100%" height="100%"  :style="{backgroundColor: (info != null && !isframe()) ? info.customcolor : 'white'}"/>
        <div class="forbid" v-if="item.mstate === 'disable'">下架</div>
        <!--<div class="timeout" v-else-if="1">已过期</div>-->
        <!--<div class="timeout" v-else>试用结束</div>-->
      </div>
      <div class="block">
        <div class="nickname">{{item.data.name}}</div>
        <img src="" class="icon">
        <div class="duty">{{item.data.factoryname}}</div>
        <div class="auth">{{item.data.factory}}</div>
      </div>
  </section>
</template>

<script>
  export default {
    props:{
      item: {
        type:Object,
        default() {
          return {}
        }
      },
    },
    data () {
      return {

      }
    },
    methods:{
      isframe(){
        return this.item.mtype == 'outframe' || this.item.mtype == 'inframe'
      },
    },

    computed: {
      imgF() {
          if(this.isframe()){
             return this.info.jt
          }else{
              return ''
          }
      },
      info () {
        try {
          let info = JSON.parse(this.item.data.info)
          return info
        } catch (e) {
          return {}
        }
      }
    }
  }
</script>
